import React from 'react';
import { Form, Row, Col, Input, Button, Space } from 'antd';
import RegionSelect from '@/components/RegionSelect';
import SchoolTypeSelect from '@/components/SchoolTypeSelect';
class Search extends React.Component {

  constructor(props) {
    super(props);
    this.formRef = React.createRef();
  }
  /* 重置数据 */
  onReset = () => {
    const {reset} = this.props;
    reset ? reset() : null;
    this.formRef.current.resetFields();
  }

  /* 表单提交 */
  onFinish = (e) => {
    const {search} = this.props;
    const {region, type, name} = e;
    const query = {};
    type ? query.type = type : null;
    name ? query.name = name : null;
    region[0] ? query.province = region[0] : null;
    region[1] ? query.city = region[1] : null;
    region[3] ? query.country = region[2] : null;
    search ? search(query) : null;
  }

  render() {
    const {onReset, onFinish, formRef} = this;
    return (
      <Form
        ref={formRef}
        name="advanced_search"
        className="ant-advanced-search-form"
        onFinish={onFinish}>
        <Row gutter={24}>
          <Col span={6}>
            <Form.Item
              name='region'
              label='城市/区域：'>
              <RegionSelect />
            </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item
              name='type'
              label='学校类型：'>
              <SchoolTypeSelect />
            </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item
              name='name'
              label='学校名称：'>
              <Input placeholder='请输入学校名称' />
            </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item style={{ textAlign: 'right' }}>
              <Space>
                <Button type="primary" htmlType="submit">查询</Button>
                <Button onClick={onReset}>重置</Button>
              </Space>
            </Form.Item>
          </Col>
        </Row>

      </Form>
    )
  }
}

export default Search